<template>
	<span :class="{
		[prefixCls+'-avatar']:true,
		[prefixCls+'-avatar-'+size]:size&&isNaN(this.size),
		[prefixCls+'-avatar-'+shape]:shape
	}"
	:style="sizeCls">
		<img :src="src" alt="" v-if="src" />
		<Icon :type="icon?icon:''" :size="iconSizeCls" v-else />
		<slot></slot>
	</span>
</template>
<script>
import { prefixCls } from '../prefix'
import './avatar.css'

export default {
	name: `${prefixCls}Avatar`,
	data() {
		return {
			prefixCls: prefixCls
		}
	},
	props:{
		icon: String,
		size: String,
		shape: {
			type:String,
			default:'circle'
		},
		src: String,
	},
	computed: {
		sizeCls() {
			if(!isNaN(this.size)){
				let _s = this.size;
				return 'width:'+_s+'px;height:'+_s+'px;line-height:'+_s+'px;'
			}
		},
		iconSizeCls() {
			if(!isNaN(this.size)){
				return this.size/2
			}
		}
	}
}
</script>